$(function () {
  let strLogin = `
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <h3 class="modal-title font-weight-bold text-center h3">
                            欢迎登录YSL官网
                        </h3>
                        <div class="container-fluid changeText">
                            <div class="row text-center">
                                <span class="col-md-6" id="infoLogin">短信快捷登录/注册</span>
                                <span class="col-md-6" id="pwdLogin">账号密码登录</span>
                            </div>
                        </div>
                        <form id="form-login">
                            <div class="form-group">
                                <input type="phone" class="form-control" id="phoneNum" placeholder="手机号">
                            </div>
                            <div class="form-group">
                                <div class="input-group"><input type="text" class="form-control"
                                        placeholder="验证码" id='codeNum'>
                                    <div class="input-group-append">
                                        <span id="code">验证码</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group"><input type="text" class="form-control"
                                        placeholder="短信验证码" id='infoNum'>
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button"
                                            id="button-addon2">发生验证码</button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group form-check">
                                <input type="checkbox" class="form-check-input"  id='checked'>
                                <label class="form-check-label"
                                    for="exampleCheck1">我同意使用条款和隐私政策</label>
                            </div>
                        </form>
                        <button type="submit" class="btn btn-dark btn-lg btn-block logining">登录</button>
                    </div>
                </div>
            </div>
        </div>
    `;
  $(".modelLogin").attr({
    "data-toggle": "modal",
    "data-target": "#exampleModal",
  });
  $(".modelLogin").after(strLogin);
  $("#infoLogin").css({
    fontSize: "16px",
    fontWeight: "600",
    borderBottom: "1px solid #000000",
    color: "#000000",
  });
  //获取随机字符串
  var str = "";
  //初始化调用
  beCheck(getNum());


  $(document).on('click', '#button-addon2', () => {
    let count = 60
    $('#infoNum').val(getNum())
    $('#button-addon2').attr('disabled', 'disabled')
    setInterval(() => {
      $('#button-addon2').text('已发送:' + count--)
      if (count <= 0) {
        $('#button-addon2').text('发生验证码')
        $('#button-addon2').removeAttr('disabled')
      }
    }, 1000)
  })

  $(document).on('click', '.logout', (e) => {
    $('.userInfo').text('登录')
    localStorage.removeItem('username')
    $('.userLog').text('注册')
    $('.userLog').addClass('userInfo')
    $('.userLog').removeAttr('logout')
    $('.makeLogin').addClass('modelLogin')
    $('.makeLogin').attr('data-target', '#exampleModal').preventDefault()
  })
});
//获取验证码
function getNum(arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]) {
  str = "";
  for (i = 0; i < 6; i++) {
    var num = Math.floor(Math.random() * (9 - 0));
    str += arr[num];
  }
  return str;
}

//点击重新刷新
$(document).on("click", "#code", () => {
  beCheck(getNum());
});

//生成
function beCheck(str) {
  $("#code").text(str);
}

// 状态切换(短信登录)
$(document).on("click", "#infoLogin", () => {
  let str = `
                                            <div class="form-group">
                                                <input type="phone" class="form-control"  id='phone' placeholder="手机号">
                                            </div>
                                            <div class="form-group">
                                                <div class="input-group"><input type="text" class="form-control"
                                                        placeholder="验证码" id="codeNum">
                                                    <div class="input-group-append">
                                                        <span id="code">验证码</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="input-group"><input type="text" class="form-control"
                                                        placeholder="短信验证码" id='infoNum'>
                                                    <div class="input-group-append">
                                                        <button class="btn btn-outline-secondary" type="button"
                                                            id="button-addon2">发生验证码</button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group form-check">
                                                <input type="checkbox" class="form-check-input" id='checked'>
                                                <label class="form-check-label"
                                                    for="exampleCheck1">我同意使用条款和隐私政策</label>
                                            </div>
    `;
  $("#form-login").html(str);
  $("#infoLogin").css({
    fontSize: "16px",
    fontWeight: "600",
    borderBottom: "1px solid #000000",
    color: "#000000",
  });
  $("#pwdLogin").css({
    fontSize: "16px",
    fontWeight: "400",
    borderBottom: "1px solid #e5e5e5",
  });
  beCheck(getNum());
});

// 状态切换(短信登录)
$(document).on("click", "#pwdLogin", () => {
  let str = `
                                            <div class="form-group">
                                                <input type="phone" class="form-control" id='phone' placeholder="手机号">
                                            </div>
                                            <div class="form-group">
                                                <input type="password" class="form-control" placeholder="密码">
                                            </div>
                                            <div class="form-group form-check">
                                                <input type="checkbox" class="form-check-input">
                                                <label class="form-check-label" for="exampleCheck1">记住我</label>
                                            </div>
    `;
  $("#form-login").html(str);
  $("#infoLogin").css({
    fontSize: "16px",
    fontWeight: "400",
    borderBottom: "1px solid #e5e5e5",
  });
  $("#pwdLogin").css({
    fontSize: "16px",
    fontWeight: "600",
    borderBottom: "1px solid #000000",
    color: "#000000",
  });


});

//登陆
$(document).on("click", ".logining", () => {
  //手机hao
  if (!$("#phoneNum").val()) {
    alert('手机号不能为空!')
    return
  }
  if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test($("#phoneNum").val())) {
    alert('手机号格式不正确!')
    return
  }
  if (!$("#codeNum").val()) {
    alert('验证码不能为空!')
    return
  }
  if (!$("#infoNum").val()) {
    alert('手机验证码不能为空!')
    return
  }
  if ($("#codeNum").val() != $('#code').text()) {
    alert('验证码不正确!')
    return
  }
  if (!$("#checked").is(':checked')) {
    alert('请勾选相关条款!')
  }

  $.ajax({
    type: 'POST',
    url: '/login',
    data: {
      username: $("#phoneNum").val()
    },
    beforeSend() {
      $('.logining').text('登陆中...')
      $('.logining').attr('disabled', 'disabled')
    },
    success(result) {
      setTimeout(() => {
        if (result.status == 1) {
          $('#exampleModal').modal('hide')
          $('.userInfo').text($("#phoneNum").val())
          localStorage.setItem('username', $("#phoneNum").val())
          $('.makeLogin').removeClass('modelLogin')
          $('.makeLogin').removeAttr('data-target')
          $('.userLog').text('退出')
          $('.userLog').addClass('logout')
          $('.userLog').removeAttr('userInfo')
          $('.logining').text('登陆')
          $('.logining').removeAttr('disabled')
        } else {
          alert('登录失败,手机号为注册或密码错误!')
        }
      }, 1000)
    }
  })
});
